<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="./css/conter.css">
    <link rel="stylesheet" type="text/css" href="./css/foot.css">
    <link rel="stylesheet" type="text/css" href="./css/login.css">
    <!-- <link rel="stylesheet" href="./css/bootstrap.css"> -->

</head>

<body>
    <header id="top">
        <div class="top">
            <img src="./img/logo.png" alt="">
            <span>欢迎登录</span>
        </div>
    </header>
    <div id="container">
        <div id="cover" class="rt">
            <form id="login" method="post" name="form1" action="#">
                <div class="txt">
                    <p>
                        登录学子商城<span><a href="register.html">新用户注册</a></span>
                    </p>
                    <div class="text">
                        <input type="text" placeholder="请输入您的用户名" name="uname" id="username">
                        <span><img src="./img/2.png"></span>
                        <span id="msg" style="color: red;"></span>
                    </div>
                    <div class="text">
                        <input type="password" id="password" placeholder="请输入您的密码" name="upwd" minlength="6"
                            maxlength="15">
                        <span><img src="./img/3.png"></span>
                    </div>
                    <div class="chose">
                        <input type="checkbox" class="checkbox" id="ck_rmbUser" value="0">自动登录
                        <span>忘记密码？</span>
                    </div>
                    <input style="border-color: #27b0f6;" class="button_login" type="button" onclick="sub()" value="登录"
                        id="bt-login">
                </div>
            </form>
        </div>
    </div>
    <div id="showResult"></div>
    <script>
        let unreg = /^[a-z0-9_-]{3,15}$/;
        let upreg = /^\w{6,12}$/;
        let xmlhttp;
        let msg= document.getElementById('msg');
        function sub() {
            let uname = document.getElementById('username').value;
            let upwd = document.getElementById('password').value;
            if (!unreg.test(uname)) {
                msg.innerHTML= '用户名格式错误！';
                return;
            }
            if (!upreg.test(upwd)) {
                msg.innerHTML= '密码格式错误！';
                return;
            }
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest;
            }else{
                xmlhttp=new ActiveXObject("Micrsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=()=>{
                // 登录成功后跳转到商城主页面
                if(xmlhttp.readyState===4&&xmlhttp.status===200){
                        console.log(msg.innerHTML);
                    msg.innerHTML=JSON.parse(xmlhttp.responseText).msg;
                    if(JSON.parse(xmlhttp.responseText).code===200)
                   location.href="index.html";
                //    http://127.0.0.1:8080/index.html
                }
                
            }
            xmlhttp.open('POST','http://127.0.0.1:8080/v1/users/login',true);
            xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            let fromdata=`uname=${uname}&upwd=${upwd}`;
            xmlhttp.send(fromdata);
        }</script>
    <div id="foot_box">
        <div class="icon1 lf">
            <img src="./img/4.png" alt="">
            <h3>品质保障</h3>
        </div>
        <div class="icon2 lf">
            <img src="./img/5.png" alt="">
            <h3>私人定制</h3>
        </div>
        <div class="icon3 lf">
            <img src="./img/6.png" alt="">
            <h3>学员特供</h3>
        </div>
        <div class="icon4 lf">
            <img src="./img/7.png" alt="">
            <h3>专属特权</h3>
        </div>
    </div>
    <div class="foot_bj">
        <div id="foot">
            <div class="lf">
                <p class="footer1"><img src="./img/logo.png" alt="" class=" footLogo"></p>
                <p class="footer2"><img src="./img/9.png" alt=""></p>
            </div>
            <div class="foot_left lf">
                <ul>
                    <li><a href="#">
                            <h3>买家帮助</h3>
                        </a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">服务保障</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
                <ul>
                    <li><a href="#">
                            <h3>商家帮助</h3>
                        </a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
                <ul>
                    <li><a href="#">
                            <h3>关于我们</h3>
                        </a></li>
                    <li><a href="#">关于达内</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li>
                        <img src="./img/10.png" alt="">
                        <img src="./img/11.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="service">
                <p>学子商城客户端</p>
                <img src="./img/12.png" class="lf">
                <img src="./img/13.png" alt="" class="lf">
            </div>
            <div class="download">
                <img src="./img/14.png">
            </div>
            <div class="record">
                ©2017 达内集团有限公司 版权所有 京ICP证xxxxxxxxxxx
            </div>
        </div>
    </div>
</body>

</html>